<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			body{
				background-image:url(img/5.jpg);
				background-repeat:repeat;
			}
			#longin{
				width:700px;
				height:750px;
				margin:100px auto;
				padding:20px;
				border:2px solid black;
				background-color:rgba(83,83,83,.5);
			}
			h1{
				text-align:center;
				padding:20px;
				font-size:4em;
				font-family:幼圆;
			}
			#icon{
				width:200px;
				height:200px;
				margin:20px auto;
				padding:0;
				background-image:url(img/4.jpg);
				border-radius:50%;
			}
			p{
				padding:20px;
				float:left;
			}
			form{
				font-size:2em;
				font-family:幼圆;
				font-weight: bold;
			}
			label{
			    display:block; 
				width:200px;
				height:50px;
				text-align:right;
				line-height:50px;
				float:left;
			}
			input{
				width:300px;
				height:40px;
				float:left;
				font-size:0.6em;
				font-family:幼圆;
				font-weight: bold;
				/* border-radius:20%; */
			}
			.btn{
				width:135px;
				height:40px;
				background-color:cadetblue;
				border:1px solid black;
				font-size:0.75em;
				font-family:幼圆;
				font-weight: bold;
				cursor:pointer;
			}
		</style>
	</head>
	<body>
		<div id="longin">
			<h1>用户登录</h1>
			<div id="icon"></div>
			<form action="" name="f1" method="post">
				<p><label>用户名：</label><input type="text" placeholder="请输入正确的用户名!"></p>
				<p><label>密码：</label><input type="password" placeholder="请输入正确的密码!"></p><br>
				<p><label ><a href="#"></label><input type="submit" value="登录" class="btn"></a></p>
				<p><a href="#"><input type="reset" value="重置"  class="btn"></a></p>
			</form>
		</div>
		
	</body>
</html>
